<template>
    <div class="notes-wrapper">
        <div class="notes-content">
            <Icon name="notes"></Icon>
            <label for="notes">备注</label>
            <input name="notes" id="notes" placeholder="没有备注怎么行" v-model="value"/>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop, Watch} from 'vue-property-decorator';

    @Component
    export default class Notes extends Vue {
        value = '';

        @Prop(String) type: string | undefined;
        @Prop(String) notes: string | undefined;

        @Watch('value')
        onValueChanged(value: string) {
            this.$emit('update:notes', value);
        }

        @Watch('type')
        onTypeChanged() {
            this.value = '';
        }

        @Watch('notes')
        onNotesChanged() {
            if (this.notes === '') {
                this.value = ''
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .notes-wrapper {
        @extend %tally-text-wrapper;

        > .notes-content {
            @extend %tally-text-content;

            > .icon {
                @extend %svg-theme-color;
            }

            > label {
                font-weight: bold;
                color: $color-gray;
            }

            > input {
                font-size: 1em;
                text-align: center;
                width: 70vw;
                line-height: 1.2em;
                color: $color-gray;

                &::placeholder {
                    color: $color-lightgray;
                }
            }
        }
    }


</style>